<template>
  <div class="home">
    <v-header />
    <div class="content">
      <div class="top">
        <div class="top-html">
          <p class="title"> 更精准的精准营销</p>
          <p class="desc">每日分析3.3亿手机用户<br/>
每日处理200TB的行为数据<br/>
每日通过大数据分析创造5000万次精准营销机会</p>

        </div>
      </div>
      <div class="aitool">
        <h3>大数据精准，精准营销才精准</h3>
        <p class="lost-desc">依托通信运营商的大数据以及大数据算法，在确保用户数据隐私安全的前提下，通过对数据的深入挖掘、对行业的深度研究、对渠道的资源整合，为各类企业客户优化营销策略，并提供触达渠道，降低营销成本的同时，提升营销效果。</p>
        <div class="project">
         <img src="./images/system.png" alt="">
        </div>
      </div>
      <div class="advantage">
        <div class="wrap">
          <h4>我们的优势</h4>

          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/full.png" alt="数据完整真实">
              <span>数据完整真实</span>
            </div>
            <div class="wrap-desc">基于数亿在网用户完整大数据的精准营销，实现人群全覆盖</div>
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/safety.png" alt="数据安全保障">
              <span>数据安全保障</span>
            </div>
            <div class="wrap-desc">信息脱敏处理，规避数据泄漏风险</div>
          </div>
          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/design.png" alt="人性化操作设计">
              <span>人性化操作设计</span>
            </div>
            <div class="wrap-desc">提供友好的用户界面。客户可快速掌握相关功能。</div>
          </div>
          
        </div>
      </div>
      <div class="case">
        <h4>成功案例</h4>
        <div class="case-list">
          <img :src=item.url :alt=item.title v-for="(item,index) in imgUrl" :key="index" />
        </div>
      </div>
    </div>
    <v-contact/>
    <v-footer/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imgUrl:[
        {url:require('./images/bank-china.png'),title:'中国银行'},
        {url:require('./images/acadsac.png'),title:'阿卡索外教网'},
        {url:require('./images/ctrip.png'),title:'携程'},
        {url:require('./images/bank-pingan.png'),title:'中国平安'},
        {url:require('./images/shifubang.png'),title:'师傅邦'},
        {url:require('./images/eleme.png'),title:'饿了么'},
        {url:require('./images/vanke.png'),title:'万科'},
        {url:require('./images/jinshanwei.png'),title:'上海金山卫计委'},
        {url:require('./images/flexible.png'),title:'圆通快递'},
        {url:require('./images/sgm.png'),title:'上海通用汽车'},
      ]
    }
  }
}
</script>
<style scoped>
.content{
  width: 100%;
  background-color: #fff;
  
}
.top{
  width: 100%;
  height: 400px;
  box-sizing: border-box;
  background: url('./images/precision1.jpg') center/cover no-repeat;
}
.top .top-html{
  padding-top: 120px;
}
.top p{
  padding: 0;
  text-align: center;
}
.top p.title{
  color: #3DD18F;
  font-size: 25px;
}
.top p.desc{
  color: #fff;
  font-size: 18px;
  line-height: 30px;
}
.aitool{
  width: 100%;
  height: 430px;
}
.aitool h3{
  font-weight: 600;
  font-size: 24px;
  color: #3E4D60;
  text-align: center;
  padding-top: 80px;
  box-sizing: content-box;
  margin: 0;
  padding: 50px 0 30px
}
.aitool .lost-desc{
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  font-size: 14px;
  color: #333333;
  line-height: 25px;
}
.project{
  width: 1100px;
  margin: 20px auto;
}
.project img{
  width: 682px;
  height: 200px;
  margin: 0 auto
}
.advantage{
  width: 100%;
  height:310px;
  background: url('./images/precision2.jpg') center/cover no-repeat;
}
.wrap{
  width: 1100px;
  margin: 0 auto;
}
.wrap h4{
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0 auto;
  padding: 40px 0 10px;
  box-sizing: content-box
}
.wrap .wrap-item{
  width: 33%;
  text-align: left;
  float: left;
  margin-top: 30px;
  text-align: center
}
.wrap .wrap-item .wrap-pic{
  width: 100%;
}
.wrap .wrap-item .wrap-pic img{
  
  vertical-align: middle;
}
.wrap .wrap-item .wrap-pic span{
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin: 15px 0
}
.wrap .wrap-item .wrap-desc{
  width: 60%;
  font-size: 14px;
  color: #fff;
  line-height: 25px;
  margin: 10px auto;
}

.case{
  height: 400px;
  box-sizing: content-box;
}
.case h4{
  margin: 0 auto;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
  color: #3E4D60;
  padding: 40px 0 30px;
}
.case .case-list{
  width: 1000px;
  margin: 0 auto
}
.case .case-list img{
  width: 135px;
  height: 101px;
  margin-bottom: 20px;
  display: inline-block;
  margin-right: 50px;
}
.case .case-list img:nth-child(5n){
  margin-right: 0;
}

</style>
  